<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>AI选股 - 每日推荐</title>
    <link href="https://cdn.jsdelivr.net/npm/tailwindcss@2.2.19/dist/tailwind.min.css" rel="stylesheet">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
    <link rel="stylesheet" href="styles.css">
    <style>
        .recommendation-card {
            position: relative;
            overflow: hidden;
            border-radius: 12px;
            background: linear-gradient(135deg, #1a56db, #3182ce);
        }
        
        .recommendation-card::before {
            content: '';
            position: absolute;
            top: -50%;
            left: -50%;
            width: 200%;
            height: 200%;
            background: radial-gradient(circle, rgba(255,255,255,0.1) 0%, rgba(255,255,255,0) 60%);
            animation: rotate 20s linear infinite;
        }
        
        @keyframes rotate {
            from { transform: rotate(0deg); }
            to { transform: rotate(360deg); }
        }
        
        .stock-tag {
            display: inline-block;
            padding: 2px 8px;
            border-radius: 12px;
            font-size: 11px;
            font-weight: 500;
            background: rgba(255, 255, 255, 0.15);
            backdrop-filter: blur(4px);
        }
        
        .market-trend {
            background: linear-gradient(to right, #f8fafc, #f1f5f9);
            border: 1px solid #e2e8f0;
            border-radius: 12px;
        }
        
        .stock-card {
            background: white;
            border-radius: 12px;
            box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
        }
        
        .stock-stats {
            display: grid;
            grid-template-columns: repeat(2, 1fr);
            gap: 8px;
        }
        
        .stat-item {
            background: #f8fafc;
            padding: 8px;
            border-radius: 8px;
        }

        .price-change {
            display: inline-block;
            padding: 2px 6px;
            border-radius: 4px;
            font-size: 11px;
            font-weight: 500;
            line-height: 1.2;
        }

        .price-up {
            background-color: rgba(239, 68, 68, 0.15);
            color: #ef4444;
        }

        .price-down {
            background-color: rgba(16, 185, 129, 0.15);
            color: #10b981;
        }

        .stock-price {
            font-size: 17px;
            font-weight: 500;
            line-height: 1.2;
            letter-spacing: -0.2px;
            margin-bottom: 4px;
        }

        /* 修改sticky-header样式 */
        .sticky-header {
            position: sticky;
            top: 0;
            z-index: 10;
            background-color: white;
            border-bottom: 1px solid #e5e7eb;
        }

        .content {
            padding-bottom: 4rem;
        }
    </style>
</head>
<body class="bg-gray-50">
    <div class="max-w-md mx-auto bg-white min-h-screen relative">
        <!-- 主内容区域 -->
        <div class="content pb-16">
            <!-- 固定头部区域 -->
            <div class="sticky-header">
                <!-- 导航栏 -->
                <div class="navbar">
                    <div class="navbar-btn">
                        <i class="fas fa-arrow-left"></i>
                    </div>
                    <div class="navbar-title">每日AI推荐</div>
                    <div class="navbar-btn">
                        <i class="fas fa-history"></i>
                    </div>
                </div>

                <!-- 市场概况 -->
                <div class="bg-white">
                    <div class="market-overview px-4 py-2.5 border-b border-gray-100">
                        <div class="flex space-x-2">
                            <div class="w-[100px] text-center bg-gray-50 rounded-lg px-2 py-1.5">
                                <div class="mb-0.5">
                                    <span class="text-sm font-medium">3,268.20</span>
                                </div>
                                <div class="flex items-center gap-1 justify-center">
                                    <span class="text-xs text-gray-500">上证</span>
                                    <span class="text-xs text-red-500">+0.66%</span>
                                </div>
                            </div>
                            <div class="w-[100px] text-center bg-gray-50 rounded-lg px-2 py-1.5">
                                <div class="mb-0.5">
                                    <span class="text-sm font-medium">11,358.42</span>
                                </div>
                                <div class="flex items-center gap-1 justify-center">
                                    <span class="text-xs text-gray-500">深证</span>
                                    <span class="text-xs text-red-500">+0.88%</span>
                                </div>
                            </div>
                            <div class="w-[100px] text-center bg-gray-50 rounded-lg px-2 py-1.5">
                                <div class="mb-0.5">
                                    <span class="text-sm font-medium">19,283.45</span>
                                </div>
                                <div class="flex items-center gap-1 justify-center">
                                    <span class="text-xs text-gray-500">恒生</span>
                                    <span class="text-xs text-green-500">-0.17%</span>
                                </div>
                            </div>
                        </div>
                    </div>

                    <!-- AI推荐标题 -->
                    <div class="pl-5 pr-4 py-2 flex items-center justify-between">
                        <div class="flex items-center gap-2">
                            <div class="w-6 h-6 bg-blue-600 rounded-full flex items-center justify-center">
                                <i class="fas fa-robot text-white text-xs"></i>
                            </div>
                            <div>
                                <div class="flex items-center gap-2">
                                    <span class="text-sm font-medium">AI智能选股</span>
                                    <span class="text-xs text-gray-400">8月15日</span>
                                </div>
                                <div class="text-xs text-gray-400 mt-0.5">基于10000+数据分析</div>
                            </div>
                        </div>
                        <!-- 排序按钮 -->
                        <div class="relative">
                            <button id="sortButton" class="flex items-center space-x-1 text-xs px-3 py-1.5 bg-gray-50 rounded-full">
                                <span id="currentSort">按图形星级</span>
                                <i class="fas fa-chevron-down text-gray-400"></i>
                            </button>
                            <div id="sortMenu" class="hidden absolute right-0 top-full mt-1 bg-white rounded-lg shadow-lg py-2 w-32 z-10">
                                <a href="javascript:void(0)" data-sort="technical" class="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-50 active">按图形星级</a>
                                <a href="javascript:void(0)" data-sort="fundamental" class="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-50">按基本面星级</a>
                                <a href="javascript:void(0)" data-sort="overbought" class="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-50">按超买星级</a>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <!-- 推荐股票列表 -->
            <div class="px-4 py-3 space-y-4">
                <!-- 推荐股票 1 -->
                <div class="stock-card p-4">
                    <div class="flex justify-between items-start mb-3">
                        <div>
                            <div class="flex items-center gap-2">
                                <h3 class="text-base font-medium">腾讯控股</h3>
                                <span class="px-2 py-0.5 bg-blue-50 text-blue-600 rounded-full text-xs">强烈推荐</span>
                            </div>
                            <div class="text-xs text-gray-500 mt-0.5">00700.HK</div>
                        </div>
                        <div class="text-right">
                            <div class="stock-price">388.60</div>
                            <div class="price-change price-up">+2.21%</div>
                        </div>
                    </div>
                    
                    <div class="text-sm text-gray-600 mb-3">
                        腾讯控股近期多项业务增长强劲，特别是游戏业务表现超预期，AI战略落地加速。
                    </div>
                    
                    <div class="stock-stats mb-3">
                        <div class="stat-item">
                            <div class="text-xs text-gray-500">昨日收盘</div>
                            <div class="font-medium text-gray-900">380.20</div>
                        </div>
                        <div class="stat-item">
                            <div class="text-xs text-gray-500">成交量</div>
                            <div class="font-medium text-gray-900">1.89亿</div>
                        </div>
                    </div>
                    
                    <div class="flex flex-wrap gap-1 mb-3 items-center justify-between">
                        <div class="flex flex-wrap gap-1">
                            <span class="inline-block px-2 py-0.5 text-xs rounded-md bg-blue-50 text-blue-600">互联网</span>
                            <span class="inline-block px-2 py-0.5 text-xs rounded-md bg-blue-50 text-blue-600">游戏</span>
                            <span class="inline-block px-2 py-0.5 text-xs rounded-md bg-blue-50 text-blue-600">AI</span>
                        </div>
                        <a href="javascript:void(0)" class="text-blue-500 text-xs">查看详情 ></a>
                    </div>
                </div>

                <!-- 推荐股票 2 -->
                <div class="stock-card p-4">
                    <div class="flex justify-between items-start mb-3">
                        <div>
                            <div class="flex items-center gap-2">
                                <h3 class="text-base font-medium">宁德时代</h3>
                                <span class="px-2 py-0.5 bg-blue-50 text-blue-600 rounded-full text-xs">中长期关注</span>
                            </div>
                            <div class="text-xs text-gray-500 mt-0.5">300750.SZ</div>
                        </div>
                        <div class="text-right">
                            <div class="stock-price">236.78</div>
                            <div class="price-change price-up">+2.77%</div>
                        </div>
                    </div>
                    
                    <div class="text-sm text-gray-600 mb-3">
                        宁德时代作为全球动力电池龙头，受益于新能源汽车持续增长，近期多项技术创新取得突破。
                    </div>
                    
                    <div class="stock-stats mb-3">
                        <div class="stat-item">
                            <div class="text-xs text-gray-500">昨日收盘</div>
                            <div class="font-medium text-gray-900">230.40</div>
                        </div>
                        <div class="stat-item">
                            <div class="text-xs text-gray-500">成交量</div>
                            <div class="font-medium text-gray-900">2.34亿</div>
                        </div>
                    </div>
                    
                    <div class="flex flex-wrap gap-1 mb-3 items-center justify-between">
                        <div class="flex flex-wrap gap-1">
                            <span class="inline-block px-2 py-0.5 text-xs rounded-md bg-blue-50 text-blue-600">新能源</span>
                            <span class="inline-block px-2 py-0.5 text-xs rounded-md bg-blue-50 text-blue-600">锂电池</span>
                            <span class="inline-block px-2 py-0.5 text-xs rounded-md bg-blue-50 text-blue-600">汽车</span>
                        </div>
                        <a href="javascript:void(0)" class="text-blue-500 text-xs">查看详情 ></a>
                    </div>
                </div>

                <!-- 推荐股票 3 -->
                <div class="stock-card p-4">
                    <div class="flex justify-between items-start mb-3">
                        <div>
                            <div class="flex items-center gap-2">
                                <h3 class="text-base font-medium">华为鲲鹏</h3>
                                <span class="px-2 py-0.5 bg-red-50 text-red-600 rounded-full text-xs">高风险高收益</span>
                            </div>
                            <div class="text-xs text-gray-500 mt-0.5">688686.SH</div>
                        </div>
                        <div class="text-right">
                            <div class="stock-price">175.30</div>
                            <div class="price-change price-up">+7.88%</div>
                        </div>
                    </div>
                    
                    <div class="text-sm text-gray-600 mb-3">
                        华为鲲鹏作为国产半导体领域代表，随着国产替代进程加速，业绩有望实现跨越式增长。
                    </div>
                    
                    <div class="stock-stats mb-3">
                        <div class="stat-item">
                            <div class="text-xs text-gray-500">昨日收盘</div>
                            <div class="font-medium text-gray-900">162.50</div>
                        </div>
                        <div class="stat-item">
                            <div class="text-xs text-gray-500">成交量</div>
                            <div class="font-medium text-gray-900">3.56亿</div>
                        </div>
                    </div>
                    
                    <div class="flex flex-wrap gap-1 mb-3 items-center justify-between">
                        <div class="flex flex-wrap gap-1">
                            <span class="inline-block px-2 py-0.5 text-xs rounded-md bg-blue-50 text-blue-600">芯片</span>
                            <span class="inline-block px-2 py-0.5 text-xs rounded-md bg-blue-50 text-blue-600">国产替代</span>
                            <span class="inline-block px-2 py-0.5 text-xs rounded-md bg-blue-50 text-blue-600">科技</span>
                        </div>
                        <a href="javascript:void(0)" class="text-blue-500 text-xs">查看详情 ></a>
                    </div>
                </div>
            </div>

            <!-- 风险提示 -->
            <div class="px-5 py-6 text-xs text-gray-500">
                <div class="flex items-center gap-2 mb-2 text-sm font-medium text-gray-700">
                    <i class="fas fa-exclamation-circle"></i>
                    <span>风险提示</span>
                </div>
                <div class="space-y-2">
                    <p>1. 本推荐基于AI算法分析，仅供参考，不构成投资建议。</p>
                    <p>2. 投资有风险，入市需谨慎。</p>
                    <p>3. 过往业绩不代表未来表现，投资者应根据自身风险承受能力做出投资决策。</p>
                </div>
            </div>
        </div>

        <!-- 底部标签栏 -->
        <div class="tabbar">
            <div class="tab-item">
                <i class="fas fa-home"></i>
                <span>首页</span>
            </div>
            <div class="tab-item active">
                <i class="fas fa-chart-line"></i>
                <span>每日推荐</span>
            </div>
            <div class="tab-item">
                <i class="fas fa-list-ul"></i>
                <span>自选</span>
            </div>
            <div class="tab-item">
                <i class="fas fa-user"></i>
                <span>我的</span>
            </div>
        </div>
    </div>
    <script>
        document.addEventListener('DOMContentLoaded', function() {
            const sortButton = document.getElementById('sortButton');
            const sortMenu = document.getElementById('sortMenu');
            const currentSort = document.getElementById('currentSort');
            const sortOptions = sortMenu.querySelectorAll('a');
            let isMenuOpen = false;

            // 切换下拉菜单
            sortButton.addEventListener('click', function(e) {
                e.stopPropagation();
                isMenuOpen = !isMenuOpen;
                if (isMenuOpen) {
                    sortMenu.classList.remove('hidden');
                    sortMenu.classList.add('block');
                } else {
                    sortMenu.classList.add('hidden');
                    sortMenu.classList.remove('block');
                }
            });

            // 点击选项时更新排序
            sortOptions.forEach(option => {
                option.addEventListener('click', function(e) {
                    e.preventDefault();
                    const sortType = this.getAttribute('data-sort');
                    const sortText = this.textContent;
                    
                    // 更新显示的文本
                    currentSort.textContent = sortText;
                    
                    // 更新active状态
                    sortOptions.forEach(opt => opt.classList.remove('active'));
                    this.classList.add('active');
                    
                    // 关闭下拉菜单
                    sortMenu.classList.add('hidden');
                    sortMenu.classList.remove('block');
                    isMenuOpen = false;

                    // TODO: 这里可以添加实际的排序逻辑
                    console.log('Sorting by:', sortType);
                });
            });

            // 点击页面其他地方时关闭下拉菜单
            document.addEventListener('click', function(e) {
                if (isMenuOpen && !sortButton.contains(e.target) && !sortMenu.contains(e.target)) {
                    sortMenu.classList.add('hidden');
                    sortMenu.classList.remove('block');
                    isMenuOpen = false;
                }
            });
        });
    </script>
</body>
</html>